<template>
    <!-- 技术-技术月报-技术月报 -->
    <base-breadcrumb :title="$route.meta.title">
        <!-- 搜索 -->
        <searchData :searchData="searchArr" @search="search"></searchData>
        <!-- 表格 -->
        <a-spin :spinning="loading">
        <a-card :bordered="false">
            <!-- <title-name :title="$route.meta.title"></title-name> -->
            <!-- 表格 -->
            <list-table
                ref="table"
                tableLayout="fixed"
                size="default"
                rowKey="id"
                :columns="columns"
                :request="loadData"
                :isScrollX="false"
                :page-keys="['pageNum', 'pageSize','total']"
                :alert="true"
                show-size-changer
                show-quick-jumper
                showPagination="auto">
                <template slot="action" slot-scope="text, record">
                    <a @click="handleManage(0, record)">查看</a>
                    <a-divider type="vertical" />
                    <span class="pint">
                         <a @click="getPritContent(record)">导出</a>
                     </span>
                </template>
            </list-table>
        </a-card>
        </a-spin>
    </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { getTechnologyMonthlyList,getTechnologyMonthlyPrint,getPageMonthTechnical,monthTechnicalExportWord} from '@/api/technical/summary' // api
import BasePage from '@/views/basePage' // 基础配置

const columns = [
    {title: '序号',width: 80,dataIndex: 'index',
        customRender() {
            return arguments[2] + 1
        }
    },
    {title: '月份',dataIndex: 'month'},
    {title: '操作',dataIndex: 'action',align: 'center',scopedSlots: { customRender: 'action' },}
]
const searchArr = [{name: '月份',value: 'month',type: 'month'},]
export default {
    name: 'a' + Date.now(),
    extends: new BasePage(),
    components: {
        STable,
    },
    data() {
        this.columns = columns
        return {
            searchArr,
            loading:false,
            queryParam: {}, // 查询参数
            loadData: async (parameter) => {
                let month = this.queryParam.month;
                if(month){
                    parameter.param = {
                        month: month
                    };
                }
                const requestParameters = Object.assign({}, parameter)
                return getPageMonthTechnical(requestParameters).then((res) => {
                 return res;
                })
            },//汇总
        }
    },
    methods: {
        // 操作栏
        handleManage(type, record) {
            let query = {}
            if (record && record.id) {
                query.id = record.id
            }
            this.$router.push({
                name: 'updateSummary',
                query
            })
        },
          // 搜索
        search(value) {
            value && (this.queryParam = value)
            this.$refs.table.refresh(true)
        },
     // 打印  
       async getPritContent(data) {
        this.loading = true;
         let res = await monthTechnicalExportWord({monthTechnicalId:data.id});
         this.handleDownload(res)
         this.loading = false;
        },
          /**
     * 转义下载
     * @param parameter
     */
    handleDownload(res) {
      let blob = new Blob([res.data], { type: 'application/doc' })
      const filename = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = filename.substring(filename.indexOf("''") + 1) // 获取文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      window.URL.revokeObjectURL(href) //释放blob对象
    },
    },
   created(){
    }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.pint{
    @{deep} .button_right{
        display: inline-block!important;
    }
}
</style>
